{template 'common/header'}
<ul class="nav nav-tabs">
	<li {if $op == 'post'}class="active"{/if}><a href="{php echo $this->createWebUrl('problem',array('op'=>'post'))}">添加挑战知识问题</a></li>
	<li {if empty($op) || $op == 'display'}class="active"{/if}><a href="{php echo $this->createWebUrl('problem')}">挑战知识问题列表</a></li>
</ul>
{if $op == 'display'}
<style>
th{
	text-align: center !important;
}
td{
	text-align: center !important;
	white-space: normal !important;
	word-break: break-all !important;
}
</style>
<style>
	.masklayer{ display: none; width: 100%; height: 100%; position: fixed; z-index: 1000; top: 0px; left: 0px; background: rgba(0,0,0,.6);}
	.mask{ display: none; width: 460px; height: auto; overflow: hidden; position: fixed; z-index: 2000; left: 50%; margin-left: -230px; background: #fff; top: 20%;}
	.mask .title{ width: 100%; height: 40px; line-height: 40px; background:#467ab3; position: relative; z-index: 10;}
	.mask .title span{ margin-left: 15px; color: #fff; font-size: 14px;}
	.mask .title .close{ width: 40px; height: 40px; position: absolute; display: block; top: 7px; right: -15px;color:#fff; z-index: 20;}
	.maskMain{  padding: 0px; height: auto; overflow: hidden; text-align: center; padding-bottom: 30px;}
	.maskMain a{ width: 40%; height: 46px; line-height: 46px; text-align: center; display: inline-block; background: #467ab3; color: #fff; border: 1px solid #000; margin: 30px 15px 0px 15px;}
</style>
<a class="btn btn-sm btn-info" href="javascript:importrow()">导入模板</a>
<a class="btn btn-sm btn-success" href="../addons/junsion_challeng/excel/example.xls">下载样例</a>
<a class="btn btn-danger btn-sm" onclick="return confirm('确认清除题库吗？清除后将无法恢复');return false;" href="{php echo $this->createWebUrl('problem', array('op' => 'delall'))}">清除题库</a>
<div class="masklayer" onclick="javascript:close1();" style="display: none;"></div>
<div class="mask maskOuter" style="display: none;">
			<p class="title">
				<span>批量导入模板</span>
				<em class="close" onclick="javascript:close1();">X</em>
			</p>
			<div class="maskMain">
				<form style="display: inline-block;width: 400px;" action="{php echo $this->createWebUrl('import')}" method="post" enctype="multipart/form-data" class="form-inline">
				<input type="file" name='txtfile' class="form-control">
				<button class="btn btn-info" style="margin-left:5%;" type="submit">导入</button>
				</form>
			</div>
</div>
<script>
function importrow(){
	$(".mask").show();
	$(".masklayer").show();
}
function close1(){
	$(".maskOuter").hide();
	$(".masklayer").hide();
}
</script>
<form action="" method="get" class="form-horizontal" role="form">
<div class="panel panel-info">
        <div class="panel-heading">筛选</div>
        <div class="panel-body">
                <input type="hidden" name="c" value="site" />
                <input type="hidden" name="a" value="entry" />
                <input type="hidden" name="m" value="junsion_challeng" />
                <input type="hidden" name="do" value="problem" />
                <div class="form-group">
                    <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">关键字</label>
                    <div class="col-xs-12 col-sm-2 col-lg-2">
                        <input class="form-control" name="kwd" type="text" value="{$_GPC['kwd']}" placeholder="请输入问题">
                    </div>
                    <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">状态</label>
				    <div class="col-xs-12 col-sm-2 col-lg-2">
				        <select class="form-control" style="margin-right:15px;" name="status">
				            <option value="">全部</option>
				            <option value="0" {if empty($_GPC['status']) && $_GPC['status']!=''} selected="selected"{/if}>隐藏</option>
				            <option value="1" {if 1 == $_GPC['status']} selected="selected"{/if}>显示</option>
				        </select>
				    </div>
                	<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"></label>
                    <div class=" col-xs-12 col-sm-2 col-lg-2">
                        <button class="btn btn-default" ><i class="fa fa-search"></i> 搜索</button>
                   	</div>
                </div>
                
        </div>
    </div>
</form>

<div class="panel panel-default">
    <div class="table-responsive panel-body">
        <table class="table table-hover">
            <thead class="navbar-inner">
            <tr>
            	<th>问题</th>
                <th>难度</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="level-list">
            {loop $list $item}
            <tr>
            	<td>{$item['title']}</td>
            	<td>
				{if $item['level']==0}<span class="label label-info">简单</span>{/if}
				{if $item['level']==1}<span class="label label-warning">中等</span>{/if}
				{if $item['level']==2}<span class="label label-danger">困难</span>{/if}
				</td>
                <td data-id='{$item["id"]}'>{if $item['status']}<label class="label label-success">显示</label>{else}<label class="label label-default">隐藏</label>{/if}</td>
               <td>
                   <a class="btn btn-default btn-sm" href="{php echo $this->createWebUrl('problem', array('op' => 'post', 'id' => $item['id']))}">编辑</a>
                   <a class="btn btn-danger btn-sm" onclick="return confirm('确认删除吗？');return false;" href="{php echo $this->createWebUrl('problem', array('op' => 'del', 'id' => $item['id']))}">删除</a>
                </td>
            </tr>
            {/loop}
            </tbody>
        </table>
        {$pager}
    </div>
<script>
$('table label').click(function(){
	var label = $(this);
	$.ajax({
		url:"{php echo $this->createWebUrl('problem',array('op'=>'status'))}",
		type:'post',
		data:{id:label.parent().attr('data-id')},
		success:function(status){
			if(status == '1'){
				if(label.hasClass('label-success')){
					label.removeClass('label-success').addClass('label-default');
					label.text('隐藏');
				}else{
					label.removeClass('label-default').addClass('label-success');
					label.text('显示');
				}
			}
		}
	});
});
</script>    
</div>

{elseif $op == 'post'}
<div class="panel panel-info">
	<div class="panel-body">
		<form action="" method="post" class="form-horizontal" role="form">
		<input type="hidden" name="id" value="{$item[id]}">
		<div class="form-group">
			<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"><span style="color:red;">*</span>问题</label>
			<div class="col-sm-9">
				<input class="form-control" required="required" name="title" id='title' type="text" value="{$item['title']}">
			</div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"><span style="color:red;">*</span>备选答案</label>
			<div class="col-sm-9">
				<table class="table">
					<thead>
					<th style="width:60px;"></th>
					<th  style="width:300px;">答案</th>
					<th>操作</th>
					</thead>
					<tbody id="tbody">
						{loop $answers $a}
						<tr class="price-item">
							<td><a href="javascript:;" class="btn btn-default btn-sm btn-move"><i class="fa fa-arrows"></i></a></td>
							<td><input type="text" class="form-control" name="answers[]" value="{$a['answers']}" /></td>
							<td><button type="button" class="btn btn-danger  btn-sm" onclick="removeCard(this)"><i class="fa fa-remove"></i></button>
							</td>
						</tr>
						{/loop}
					</tbody>
					<tbody>
						<tr>
							<td colspan="4"><button type="button" class="btn btn-default  btn-sm" onclick="addCard()"><i class="fa fa-plus"></i> 添加次数</button></td>
						</tr>
				</table>
			</div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"><span style="color:red;">*</span>正确答案</label>
			<div class="col-sm-9">
				<input class="form-control" required="required" name="answer" id='answer' type="text" value="{$item['answer']}">
				<div class="help-block" style="color:red;">正确答案，如上述答案中第二个是正确的，则此处填2</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">难度</label>
		    <div class="col-xs-12 col-sm-9">
		        <select class="form-control" style="margin-right:15px;" name="level">
		            <option value="0" {if empty($item['level'])} selected="selected"{/if}>简单</option>
		            <option value="1" {if $item['level']==1} selected="selected"{/if}>中等</option>
		            <option value="2" {if $item['level']==2} selected="selected"{/if}>困难</option>
		        </select>
		    </div>
		</div>
		<div class="form-group">
			<label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">状态</label>
			<div class="col-sm-9">
				<label><input type="radio" name="status" {if empty($item['status'])}checked="checked"{/if} value="0"> 隐藏</label>
				<label style="margin-left: 10px;"><input type="radio" name="status" {if $item['status']}checked="checked"{/if} value="1"> 显示</label>
			</div>
		</div>
		
		<button type="submit" class="btn btn-primary" name="submit" id='summit_info' value="提交">保存</button>
		<input type="hidden" name="token" value="{$_W['token']}" />
		</form>
	</div>
</div>
<script>
function removeCard(obj){
	$(obj).closest('.price-item').remove();
}
function addCard(){
	var html='<tr class="price-item">';
	html+='<td><a href="javascript:;" class="btn btn-default btn-sm btn-move"><i class="fa fa-arrows"></i></a></td>';
	html+='<td><input type="text" class="form-control" name="answers[]" /></td>';
	html+='<td><button type="button" class="btn btn-danger  btn-sm" onclick="removeCard(this)"><i class="fa fa-remove"></i></button>';
	html+='</td>';
	html+='</tr>';
	$('#tbody').append(html);
	bindEvents();
}
function bindEvents() {
	require(['jquery.ui'] ,function(){
		$("#tbody").sortable({handle: '.btn-move'});
    });
}
$(function(){
	bindEvents();
	$("#summit_info").click(function(){
		var title = $("#title").val();
		if(!title){
			alert("请输入问题");
			return false;
		}
	});
});
</script>
{/if}
{template 'common/footer'}